<template>
  <div>
    <div ref="elements" v-for="(item, index) in items" :key="index">{{ item }}</div>
    <button @click="updateElements">更新元素内容</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const items = ["Item 1", "Item 2", "Item 3"];
    const elements = ref([]);

    // 在mounted生命周期中将DOM元素引用存入elements数组中
    const updateElements = () => {
      elements.value.forEach((el, index) => {
        el.innerText = `Updated ${items[index]}`;
      });
    };

    return {
      items,
      elements,
      updateElements,
    };
  },
};
</script>
